<template>
  <div>
    <div style="display: flex;margin-bottom: 10px">
      <el-button @click="jumpAddActivity" type="primary" style="margin-left: 10px" size="medium">增加
      </el-button>
      <el-input
        placeholder="请输入活动名称"
        v-model="activityName"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getActivityList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
    </div>

    <el-table
      :data="page.records"
      border
      style="width: 100%">

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="活动详情：">
              <span>{{ props.row.activityDetail }}</span>
            </el-form-item>
<!--            <el-form-item label="社团通知：">-->
<!--              <span>{{ props.row.clubNotice }}</span>-->
<!--            </el-form-item>-->
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        fixed
        prop="id"
        label="ID"
        width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="活动名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="activityStatus"
        label="活动状态"
        width="120">
        <template slot-scope="scope">
          <div class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.activityStatus==0">待审核</el-tag>
            <el-tag type="success" size="medium" v-if="scope.row.activityStatus==1">审核通过</el-tag>
            <el-tag type="warning" size="medium" v-if="scope.row.activityStatus==2">不通过</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.activityStatus==3">禁用中</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.activityStatus==4">活动过期</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.activityStatus==5">活动进行中</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="clubName"
        label="所属社团"
        width="120">
      </el-table-column>
      <el-table-column
        prop="activityIntroduce"
        label="活动简介"
        width="300">
      </el-table-column>
      <el-table-column
        prop="address"
        label="活动地点"
        width="120">
      </el-table-column>
      <el-table-column
        prop="object"
        label="活动对象"
        width="120">
      </el-table-column>
      <el-table-column
        prop="wechat"
        label="微信"
        width="120">
      </el-table-column>
      <el-table-column
        prop="maxPerson"
        label="参与人数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="activityType"
        label="活动分类"
        width="120">
      </el-table-column>

      <el-table-column
        label="活动开始时间"
        width="120"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ getDateTime(scope.row.beginTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动结束时间"
        width="120"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ getDateTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="250">
        <template slot-scope="scope">
          <el-button @click="getActivityMember(scope.row.id)" type="text" size="small">查看人员</el-button>
          <el-button @click="jumpUpdateActivity(scope.row)" type="text" size="small">修改活动</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changeActivityList"
      :page-count="page.pages"
    >
    </el-pagination>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      class="dialog1"
      width="35%"
      center>
      <el-table :data="member">
        <el-table-column property="name" label="姓名" width="100"></el-table-column>
        <el-table-column property="sex" label="性别" width="100"></el-table-column>
        <el-table-column property="grade" label="年级" width="100"></el-table-column>
        <el-table-column property="phone" label="电话" width="100"></el-table-column>
        <el-table-column property="association" label="所属组织" width="100"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getActivityMember,
  getActivityMemberNum,
  getMyManageActivityPageList,
  updateActivity
} from "../../../api/activity";
import {getDateTime1} from "../../../utils/dateTimeUtil";

export default {
  name: "ActivityManage",
  data() {
    return {
      page: {
        total: 2,
        current: 1,
        records: [],
        pages: 2,
      },
      activityName: null,
      clubId: null,
      dialogVisible: false,
      member: [],
      title: ''
    }
  },
  created() {
    this.clubId = this.$route.params.clubId;
    this.getActivityList();
  },
  methods: {
    jumpUpdateActivity(row) {
      // this.$router.push({path: `updateActivity/${row}`})
      this.$router.push({
        path: `/managerHome/updateActivity`,
        name: 'updateActivity',
        params: {
          row: row
        }
      })
    },
    jumpAddActivity() {
      this.$router.push({
        path: `/managerHome/addActivity`,
        name: 'addActivity',
        params: {
          clubId: this.clubId
        }
      })
      // this.$router.push({path: `addActivity/${this.clubId}`})
    },
    getActivityList() {
      getMyManageActivityPageList({
        currentPage: this.page.current,
        clubId: this.clubId,
        activityName: this.activityName,
      }).then(res => {
        this.page = res.data;
      })
    },
    changeActivityList(val) {
      console.log(val)
      this.page.current = val;
      this.getActivityList();
    },
    getDateTime(val) {
      return getDateTime1(val);
    },
    getActivityMember(activityId) {
      getActivityMember({
        activityId: activityId,
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.dialogVisible = true
          this.member = res.data.stuList
          this.title = "参加成员（" + res.data.num + ")"
        }
      })
    },

  }
}
</script>

<style scoped>
.dialog1 {
  overflow-y: auto;
  height: calc(100vh - 140px);
}
.demo-table-expand {
  font-size: 0;
  text-decoration: none;
  margin: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
